/* eslint-diable */
import React from "react";
import Field from "./Field";
import Viewport from "./Viewport";
import AppContainer from "./AppContainer";
import EffectsPanel from "./EffectsPanel";
import Button from "./Button";
import ExportPanel from "./ExportPanel";
import ExportedLink from "./ExportedLink";
import uploadImage from "./uploadImage";

const {Component} = React;

const percentagePrint = v => (v * 100).toFixed(0) + "%";
const radiantPrint = r => (180 * r / Math.PI).toFixed(0) + "°";

const initialInputs = {
  blur: 0,
  saturation: 1,
  contrast: 1,
  brightness: 1,
  negative: 0,
  hue: 0,
  sepia: 0,
  flyeye: 0
};

const fields = [
  { id: "blur", name: "模糊", min: 0, max: 6, step: 0.1, prettyPrint: blur => blur.toFixed(1) },
  { id: "contrast", name: "对比度", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint },
  { id: "brightness", name: "亮度", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint },
  { id: "saturation", name: "饱和度", min: 0, max: 10, step: 0.1, prettyPrint: percentagePrint },
  { id: "hue", name: "色相", min: 0, max: 2 * Math.PI, step: 0.1, prettyPrint: radiantPrint },
  { id: "negative", name: "反相", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint },
  { id: "sepia", name: "Sepia滤镜", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint },
  { id: "flyeye", name: "FlyEye滤镜", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint }
];

const errorWrapper = {
  display: 'flex',
  height: '500px',
  flexFlow: 'column',
  fontSize: '20px',
  fontWeight: 'bold',
  justifyContent: 'space-around',
  textAlign: 'center',
};

const btnStyle = {
  width: '30%',
  height: '40px',
  backgroundColor: '#1890ff',
  color: '#fff',
  margin: '0 auto',
  fontSize: '16px',
  border: 'none',
  borderRadius: '4px',
  marginBottom: '100px',
};

export default class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      content: {
        // uri: "http://i.imgur.com/wxqlQkh.jpg",
        uri: this.getTempImg(),
        mainType: "image",
      },
      uploaded: null,
      ...initialInputs
    };
  }

 getTempImg = () => {
    return localStorage.getItem('tempImg');
 };

  onLoadNewContent = content => {
    this.setState({ content });
  };

  onExport = () =>
    this.refs.viewport.captureFrame()
    .then(uploadImage);

  handleGoBack = () => {
    window.history.back();
  };

  render () {
    const { content, uploaded, ...effects } = this.state;

    return (
      <AppContainer>
        {this.getTempImg() ? (
          <div>
            <Viewport
              ref="viewport"
              effects={effects}
              onLoadNewContent={this.onLoadNewContent}
              content={content}
            />
          <EffectsPanel>
              {fields.map(({ id, ...props}) =>
                <Field key={id}
                       {...props}
                       value={effects[id]}
                       onChange={value => this.setState({ [id]: value })}
                       onReset={() => this.setState({ [id]: initialInputs[id] })}
                />
              ) }
              <ExportPanel>
                <Button style={btnStyle}  onPress={this.onExport}>上传</Button>
                <button style={{...btnStyle, backgroundColor: '#aaa'}} onClick={this.handleGoBack}>返回</button>
                {uploaded ? <ExportedLink>{uploaded}</ExportedLink> : null}
              </ExportPanel>
            </EffectsPanel>
          </div>
        ) : (
          <div style={errorWrapper}>
            <span>图案片上传失败，请返回重试</span>
            <button
              style={btnStyle}
              onClick={this.handleGoBack}
            >
              返回
            </button>
          </div>
        )}
      </AppContainer>
    );
  }
}
